/*
 * @Date: 2022-01-11 18:15:40
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-13 17:30:15
 * @FilePath: \todo-app\src\components\TodoMain.js
 */
import React, { Component } from 'react'

export default class TodoMain extends Component {
  
  // ~双击弹层
  state = {
    TodoMVCTemplate: '',
   
  }
  // ~双击弹层！
  TodoTemplate = e => {
    const { value } = e.target
    this.setState({
      TodoMVCTemplate: value
    })
  }
  // ~删除内容！
  delContent = id => {
    const { delContent } = this.props
    delContent(id)
  }

  // ~改变禁用属性
  changeCompleted = id => {
    const { setActive } = this.props
    setActive(id)
  }
 
  // ~全选
  checkAll = e => {
    const { checked } = e.target
    const { selectAll } = this.props
    selectAll(checked)
  }
  render() {
    const { TodoMVCTemplate } = this.state
    const { list, flag, ClickState } = this.props
    
  

    let newList = null
    if (ClickState === 'All') {
      newList = list
    } else if (ClickState === 'Active') {
      newList = list.filter((item) => item.isDone === false)
    } else {
      newList = list.filter((item) => item.isDone === true)
    }
    return (
  
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          onChange={this.checkAll}
          checked={flag}
        />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul className="todo-list">
        
          {newList.map(item => (
            // !completed禁用
            <li className={item.isDone ? 'completed' : null} key={item.id}>
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.isDone}
                  onChange={() => this.changeCompleted(item.id)}
                />
                <label>{item.name}</label>
                <button
                  className="destroy"
                  onClick={() => this.delContent(item.id)}
                ></button>
              </div>
              <input
                className="edit"
                value={TodoMVCTemplate}
                onChange={this.TodoTemplate}
              />
            </li>
          ))}
        </ul>
      </section>
    )
  }
}
